<template>
  <div class="users-wrap">
    <table cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>用户名</th>
          <th>昵称</th>
          <th>性别</th>
          <th>生日</th>
          <th>所在地</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in users" :key="item.name">
          <td>{{item.name}}</td>
          <td>{{item.nick}}</td>
          <td>{{item.sex}}</td>
          <td>{{item.birth}}</td>
          <td>{{item.place}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: "users",
    data() {
      return {
        users: ''
      }
    },
    mounted() {
      this.$http.get('api/user/findAll.do').then((res) => {
        this.users = res.data;
        console.log(res.data);
      })
    }
  }
</script>

<style scoped lang="less">
  .users-wrap {
    width: 6.9rem;
    padding: 0 0.3rem;
    height: auto;
    table {
      width: 100%;
      height: auto;
      margin: 0.3rem auto 0;
      border-bottom: 1px solid #f2f2f2;
      border-right: 1px solid #f2f2f2;
      thead {
        background-color: #41b883;
      }
      tbody {
        tr:nth-of-type(2n) {
          background-color: #cccccc;
        }
      }
      th, td {
        font-size: 0.26rem;
        line-height: 0.6rem;
        text-align: center;
        font-weight: normal;
        border-top: 1px solid #f2f2f2;
        border-left: 1px solid #f2f2f2;
      }
      th {
        color: #ffffff;
      }
    }
  }
</style>
